<template>

	<!--	搜索-->
	<el-row >
		<el-col :span="24">
			<el-form
				:inline="true"
				:model="state.query"
			>
				<el-form-item label="用户名">
					<el-input v-model="state.query.username" placeholder="" clearable />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="page">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>
	<!--	表格-->
	<el-row>
		<el-col :span="24">
			<el-table :data="state.tableData" border style="width: 100%">
				<el-table-column prop="id" label="编号" align="center" />
				<el-table-column prop="username" label="账号" align="center" />
				<el-table-column prop="password" label="密码" align="center" />
				<el-table-column fixed="right" label="操作" align="center">
					<template #default="scope">
						<el-button
							link
							type="primary"
							size="small"
							@click.prevent="del(scope.row)"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-col>
	</el-row>

	<!--	分页-->
	<el-row>
		<el-col :span="24" class="pagination-container">
			<el-pagination class="page" layout="prev, pager, next" :total="state.query.limit" />
		</el-col>
	</el-row>
</template>
<script setup lang="ts">

const state = reactive(<any>{
	query: {
		page: 1,
		limit: 10
	},
	tableData: []
})
function page() {
	const params = state.query
	http.get('/api/users/page', { params }).then(response => {
		state.tableData = response.data.list
		state.query.page = response.data.page.page
	})
}
/**
 * 删除
 */
const del = (data:any) => {
  http.delete(`/api/user/del/${data.id}`).then(() => {
		toast.success("删除成功")
		page()
	})
}

onMounted(() => {
	page()
})


</script>
<style scoped>
.pagination-container {
	padding-top: 15px;
	display: flex;
	justify-content: center; /* 水平居中 */
}


</style>
